<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<title>开发平台</title>
	<script src="${ctx}/common/plateform/base/jquery/jquery.min.js"></script>
	<script src="${ctx}/common/plateform/base/bootstrap/bootstrap.min.js"></script>
	<link href="${ctx}/common/plateform/base/bootstrap/bootstrap.min.css" rel="stylesheet">
	<link href="${ctx}/common/plateform/plugins/adminlte/AdminLTE.css" rel="stylesheet">
	<script src="${ctx}/common/plateform/base/layer/layer.js"></script>
	<link href="${ctx}/common/plateform/base/fonts/font-awesome.min.css" rel="stylesheet">
	<link href="${ctx}/common/plateform/base/utils/plateform.css" rel="stylesheet" />
	<link href="${ctx}/common/plateform/base/utils/mystyle.css" rel="stylesheet" />
	<!-- layer弹出层 -->
	<script src="${ctx}/common/plateform/base/layer/layer.js"></script>
	<!--[if lt IE 10]>
	<script src="${ctx}/common/plateform/plugins/ie/html5shiv.min.js"></script>
	<script src="${ctx}/common/plateform/plugins/ie/respond.min.js"></script>
	<![endif]-->
	<!-- bootstrapValidator验证 -->
	<script src="${ctx}/common/plateform/base/bootstrapValidator/bootstrapValidator.min.js"></script>
	<link href="${ctx}/common/plateform/base/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet" />

	<script src="${ctx}/common/plateform/base/utils/jquery-md5-min.js"></script>
	<script src="${ctx}/common/plateform/base/utils/jigswa.js"></script>
	<link href="${ctx}/common/plateform/base/utils/jigswa.css" rel="stylesheet" />
	<script>
        var ctx = '${ctx}';
	</script>
</head>
<style>
	.login_wrap {
		background-size: 100%;
		margin-top: 10px;
	}

	input {
		display: block;
		width: 290px;
		line-height: 40px;
		margin: 10px 0;
		padding: 0 10px;
		outline: none;
		border:1px solid #c8cccf;
		border-radius: 4px;
		color:#6a6f77;
	}
	#msg {
		width: 100%;
		line-height: 40px;
		font-size: 14px;
		text-align: center;
	}
	a:link,a:visited,a:hover,a:active {
		margin-left: 100px;
		color: #0366D6;
	}


</style>

<body>


<div class="container">
	<div class="row">
		<div class="col-sm-offset-1 col-lg-8">
			<div class="panel">
				<div class="panel-heading text-center">
					<h3 class="text-success">
						密码找回
					</h3>
				</div>
				<div class="panel-body" id="table1">
					<!-- 注册内容主体 start -->
					<form class="form-horizontal" role="form" name="frm1" id="frm1" action="javascript:void(0)">
						<input type="hidden" name="formToken" id="formToken" value="${formToken}">
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>用户名：</label>
							<div class="col-sm-9">
								<input    type="text" class="form-control clean" id="frm1_login_username" name="uctUser.userEname" tip="请输入登录名" placeholder="请输入登录名（6-20位英文字母加数字）" abc="1" maxlength="20" style="color: rgb(0, 0, 0);"/>
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>手机号码：</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" name="uctUser.mobile" id="frm1_login_mobile" tip="请输入手机号码" placeholder="请输入手机号码" abc="1" minlength="11" maxlength="11" style="color: rgb(0, 0, 0);">
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red"
																				   style="vertical-align: middle;">*</font>验证码：</label>
							<div class="col-sm-6">
								<input id="rand" name="rand" size="6" maxlength="6" style="width:50%; margin-right:5px;"
									   placeholder="请输入验证码"
									   class="form-control clean">
								<input name="flagDiv" id="flagDiv" type="hidden" value=""/>
								<button  type="button" class="btn btn-primary btn-sm" onclick="popWin()">获取短信验证码</button>
							</div>
						</div>
						<div class="form-group col-sm-12" >

							<div class="form-group text-center" >
								<button type="button" onclick="next()"  class="btn btn-primary btn-lg" style="width:300px;">下一步</button>
							</div>
						</div>


						<div class="modal fade" id="popWin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog" style="width:367px;top:10%;" >
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
											×
										</button>
										<h4 class="modal-title">
											<font color="red">验证码校验<span id="span-module-add-title" class="ml20"></span></font> 
										</h4>
									</div>

									<div class="modal-body">
										<div class="panel-body" style="padding-bottom: 20px;">
											<div id="captcha" style="position: relative;border: 0px red solid;width: 310px;">
											</div>
										</div>
									</div>
								</div>
								<!-- /.modal-content -->
							</div>
						</div>
					</form>

					<form class="form-horizontal" style="display: none;" role="form" name="frm2" id="frm2" action="javascript:void(0)">
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>登录密码：</label>
							<div class="col-sm-9">
								<input type="password" class="form-control clean" id="frm1_login_password" name="uctUser.userPass" tip="请输入密码" placeholder="请输入登录密码">
							</div>
						</div>
						<div class="form-group col-sm-12">
							<label class="col-sm-3 control-label text-right"><font color="red" style="vertical-align: middle;">*</font>确认密码：</label>
							<div class="col-sm-9">
								<input type="password" class="form-control clean" id="frm1_login_password2" name="userPass2" tip="请输入确认密码" placeholder="请再次输入密码">
							</div>
						</div>

						<div class="form-group col-sm-12" >
							<div class="form-group text-center" >
								<button type="button" onclick="editPasswd()"  class="btn btn-primary btn-lg" style="width:300px;">提 交</button>
							</div>
						</div>
					</form>
						<!-- 注册内容主体 end -->
				</div>
				<br/>
				<div id="table2" style="height: 400px;display: none;margin-top: 30px;">
					<div class="form-group">
						<div  class="text-center">
							<h3>
								<font color="red">恭喜，您已经成功注册，登录名为：<span id="userName"></span>
								</font>
							</h3>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>





</div>












<!-- foot start -->
<center>
	<footer class="login-footer text-center" style="margin-top:10px; margin-bottom:10px;">
		<p class="col-sm-12 ">版权所有 &copy;2018-2020 平台开发小组</p>
	</footer>
</center>
<!-- foot start -->

</body>

<script type="text/javascript">
    $(function(){
        setValidate1;//校验
    });

    jigsaw.init(document.getElementById('captcha'), function () {
        sendMsg();
    })

    //回车登录
    document.onkeydown=function mykeyDown(e){
        //compatible IE and firefox because there is not event in firefox
        e = e||event;
        if(e.keyCode == 13) {sumbit();}
        return;
    };

    function popWin(){
        var mobileVal = $("#frm1").find("input[name='uctUser.mobile']").val();
        if(mobileVal==null|| mobileVal==""|| mobileVal==undefined){
            layer.tips('请输入手机号码！', '#frm1_login_mobile', {tips: 1});
            return;
        }
        if(!/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(mobileVal)){
            layer.tips('请填写正确的手机号码！', '#frm1_login_mobile', {tips: 1});
            return;
        }
        $("#popWin").modal("show");
    }

    //登录操作
    function sumbit(){
        var uname = $('#userEname').val();
        var upass = $('#upass').val();
        if(uname==null|| uname==""){
            setErrMsg('请输入用户名');
            $('#userEname').focus();
            return;
        }
        if(upass==null|| upass==""){
            setErrMsg('请输入密码');
            $('#upass').focus();
            return;
        }
        var index_load = layer.load(1, {shade: false});
        $("#password_form").val(upass.md5());
        $("#randCode_form").val($("#rand").val());
        $("#username_form").val(uname);
        var formUrl =ctx+"/res/uct/login";
        //数据提交
        $.ajax({
            url:formUrl,
            type:'post',
            data: $("#inputForm").serialize(),
            success:function(data){
                var jdata = jQuery.parseJSON(data);
                console.log(jdata);
                if (jdata.flag == 'T') {
                    //使用此种方式防止外部系统登录无法跨域访问
                    window.location.href="${ctx}/sendPage/plateform/admin/index";
                } else {
                    setErrMsg(jdata.msg);
                    clearForm();
                }
                layer.close(index_load);
            },error:function(data){
                layer.close(index_load);
                setErrMsg('与服务器连接失败');
            }
        });
    }


    function editPasswd(){
        var index_submit = layer.confirm('请确认您要修改的密码，如确认无误，请点击“是”继续！', {btn: ['是','否'],closeBtn: 0,offset: '220px'}
            , function(){
                layer.close(index_submit);
                var index_load = layer.load(1, {shade: false});
                var userEname = $('#frm1').find('input[name="uctUser.userEname"]').val();
                var pass = $('#frm2').find('input[name="uctUser.userPass"]').val();
                pass = pass.md5();
                $.ajax({
                    url:ctx+"/res/uct/editPasswd",
                    data:{"username":userEname,"newPass":pass},
                    dataType:'json',
                    type:'post',
                    success:function(myData){
                        layer.close(index_load);
                        layer.alert(myData.msg);
                    }
                });
            });

    }
    //发送短信验证码
    function sendMsg(){
        var formUrl =ctx+"/res/uct/sendSmsCode";
        $.ajax({
            url:formUrl,
            type:'post',
            data: $("#frm1").serialize(),
            success:function(data){
                var jdata = jQuery.parseJSON(data);
                if (jdata.flag == 'T') {
                    //使用此种方式防止外部系统登录无法跨域访问
                } else {
                    setErrMsg(jdata.msg);
                    clearForm();
                }
                layer.close(index_load);
            },error:function(data){
                layer.close(index_load);
                setErrMsg('与服务器连接失败');
            }
        });
    }

    //清空表单数据
    function clearForm(){
        $("#upass").val("");
        $("#userEname").val("");
    }


    //下一步
    function next(){
        var rs = checkCode();
        if(rs){
            setValidate2();
            $("#frm1").hide();
            $("#frm2").show();
		}

    }

    function checkCode(){
        var flag = false;
        var url =ctx+"/res/uct/checkMsgCode";
        var userEname = $('#frm1').find('input[name="uctUser.userEname"]').val();
        var mobile = $('#frm1').find('input[name="uctUser.mobile"]').val();
        var rand = $('#frm1').find('input[name="rand"]').val();
        $.ajax({
            url:url,
            type:'post',
            async:false,
            data: {"uctUser.mobile":mobile,"rand":rand,"uctUser.userEname":userEname},
            success:function(data){
                console.log(data);
                var jdata = jQuery.parseJSON(data);
                if (jdata.flag == 'T') {
                    flag = true;
                } else {
                    layer.alert(jdata.msg);
                    clearForm();
                }
            },error:function(data){

            }
        });
        return flag;
	}


    //1.校验规则-定义
    function setValidate1(){
        $('#frm1').bootstrapValidator({
            // excluded: [':disabled'],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                "uctUser.mobile": {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空！'
                        },
                        regexp: {
                            regexp:/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
                            message: '手机号格式不正确！'
                        }
                    }
                }
            }
        });
    }

    function setValidate2(){
        $('#frm2').bootstrapValidator({
            // excluded: [':disabled'],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                "uctUser.userPass":{
                    validators: {
                        notEmpty: {
                            message: '密码不能为空！'
                        }/**,
                         different: {
                            field: 'uctUser.userEname',
                            message: '密码不能与登录名重复！'
                        },
                         regexp:{
                            regexp:/^(?!.([111111]|[123456]))([A-Z]|[a-z]|[0-9]|[`~!@#$%^&*()+=|{}':;',\\\\[\\\\].<>?~！@#￥%……&*（）——+|{}【】‘；：”“'。，、？]){6,20}$/,
                            message:'密码不能过于简单，密码格式可包含：6-20 位，字母、数字、字符！'
                        }**/
                    }
                },
                "userPass2":{
                    validators: {
                        notEmpty: {
                            message: '请输入确认密码！'
                        },
                        identical: {
                            field: 'uctUser.userPass',
                            message: '两次输入密码不一致！'
                        }
                    }
                }

            }
        });
    }


</script>
</html>
